// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 引入css文件
import "./index.css"

// import img from './img/cat.jpg'

// 更新数据
// setState()是异步更新数据的
// 注意:使用该语法,后面的setState() 不要依赖前面的setState()
// 可以多次调用setState(), 只会触发一次重新渲染 render

//推荐语法
// 使用 setState((state,props)=>{}) 语法
// 参数 state 表示最新的state
// 参数  props 表示最新的 props

// 第二个参数
// 场景 在状态更新(页面完成重新渲染) 后立即执行某个操作
// 语法 setState(update[,callback])  setState((state,props)=>{},()=>{})



// 组件的更新机制
// setState() 的两个作用 1 修改state 2 更新组件UI
// 过程: 父组件重新渲染时,也会重新渲染子组件 但只会渲染当前组件子树(当前组件及其所有子组件)


class App extends React.Component {
    state = {
        count: 1,
        msg: ""
    }
    handlerClick = () => {
        // 此处.更新 state
        // 注意: setState是异步执行的
        // 注意: 使用该语法 ,后面setState,不要依赖前面的setState

        // this.setState({
        //     count: this.state.count + 1,
        //     msg: "one setState"
        // })

        // // 再次调用第二次  count 不会再次+1
        // this.setState({
        //     count: this.state.count + 1,
        //     msg: "two setState"
        // })

        //推荐语法
        // 注意 这种语法也是异步更新state的!
        // 状态更新后并且重新渲染DOM 才会执行回调方法
        this.setState(
            (state, props) => {
                return {
                    count: state.count + 1,
                    msg: 'setState-1'
                }
            }, () => {
                console.log(" 回调方法", this.state.count)
                console.log(" 回调方法", document.getElementById('title'))
            }
        )

        // 在上一次的count基础之上 再次+1
        this.setState(
            (state, props) => {
                return {
                    count: state.count + 1,
                    msg: 'setState-2'
                }
            }
        )

        console.log("count", this.state.count)

    }


    render() {
        console.log("render")
        return (
            <div>
                <h1 id="title">计算器:{this.state.count}</h1>
                <h1>信息:{this.state.msg}</h1>
                <button onClick={this.handlerClick}>+1</button>
            </div>
        )
    }
}

//3 渲染react元素
ReactDOM.render(
    <App />,
    document.getElementById('root'))
